<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Flexbox 布局练习</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<strong id="menu">显示隐藏菜单</strong>
	<nav id="drop">
		<ul>
			<li><a href=""></a>flex-direction</li>
			<li><a href="#flex-direction">row</a></li>
			<li><a href="#row-reverse">row-reverse</a></li>
			<li><a href="#column">column</a></li>
			<li><a href="#column-reverse">column-reverse</a></li>
			<li>左右上下浮动</li>
		</ul>
		<ul>
			<li><a href=""></a>flex-wrap</li>
			<li><a href="#nowrap">nowrap</a></li>
			<li><a href="#wrap">wrap</a></li>
			<li><a href="#wrap-reverse">wrap-reverse</a></li>
			<li>是否换行</li>
		</ul>
		<ul>
			<li><a href="#flex-flow">flex-flow这个属性是flex-direction和flex-wrap属性的简写。</a></li>
		</ul>
		<ul>
			<li>justify-content </li>
			<li><a href="#flex-start">flex-start</a></li>
			<li><a href="#flex-end">flex-end</a></li>
			<li><a href="#center">center</a></li>
			<li><a href="#space-between">space-between</a></li>
			<li><a href="#space-around">space-around</a></li>
		</ul>
		<ul>
			<li>align-items </li>
			<li><a href="#stretch">stretch</a></li>
			<li><a href="#align-items-flex-start">flex-start</a></li>
			<li><a href="#align-items-flex-end">flex-end</a></li>
			<li><a href="#align-items-center">center</a></li>
			<li><a href="#baseline">baseline</a></li>
		</ul>
		<ul>
			<li title="注意：这个属性只有当flex容器有多行flex项目时才生效，如果flex容器只有一行flex项目，这个属性没有效果。">align-content </li>
			<li><a href="#align-content-stretch">stretch</a></li>
			<li><a href="#align-content-flex-start">flex-start</a></li>
			<li><a href="#align-content-flex-end">flex-end</a></li>
			<li><a href="#align-content-center">center</a></li>
			<li><a href="#align-content-space-between">space-between</a></li>
			<li><a href="#align-content-space-around">space-around</a></li>
		</ul>
		<hr>
		<p style="background:yellow;color:#000;text-align:center;">子元素属性</p>
		<hr>
		<ul>
			<li><a href="#order">order</a></li>
			<li><a href="#flex-grow">flex-grow</a></li>
			<li><a href="#flex-shrink">flex-shrink</a></li>
			<li><a href="#flex-basis">flex-basis</a></li>
		</ul>
		<ul>
			<li><a href="#flex">flex是flex-grow、flex-shrink和flex-basis属性的简写</a></li>
		</ul>
		<ul>
			<li><a href="#align-self">align-self</a></li>
		</ul>
	</nav>
	<h1>flex容器属性</h1>
	<div class="title" id="flex-direction">flex-direction这个属性主要设置flex容器的主轴方向，指定flex项目在flex容器中的排列方式。flex容器的主轴方向主要有水平和纵向两种。</div>
	<div class="body row">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>

	<div class="title" id="row-reverse">row-reverse 右向左 相当于子元素全部右浮动</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>

	<div class="title" id="column">column flex项目从上到下排在一列中</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>

	<div class="title" id="column-reverse">column-reverse flex项目从上到下排在一列中</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>

	<div class="title" id="nowrap">nowrap Flex项目在flex容器中显示成一行，flex项目什么自动缩减来适应flex容器的宽度。</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span>10</span>
		<span>11</span>
		<span>12</span>
		<span>13</span>
		<span>14</span>
		<span>15</span>
		<span>16</span>
		<span>17</span>
		<span>18</span>
		<span>19</span>
		<span>20</span>
		<span>21</span>
		<span>22</span>
		<span>23</span>
		<span>24</span>
		<span>25</span>
		<span>26</span>
		<span>27</span>
		<span>28</span>
		<span>29</span>
		<span>30</span>
		<span>31</span>
		<span>32</span>
		<span>33</span>
		<span>34</span>
		<span>35</span>
		<span>36</span>
		<span>37</span>
		<span>38</span>
		<span>39</span>
		<span>40</span>
	</div>

	<div class="title" id="wrap-reverse">wrap-reverse Flex项目从左到右和从下到上在flex容器中多行显示</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span>10</span>
		<span>11</span>
		<span>12</span>
		<span>13</span>
		<span>14</span>
		<span>15</span>
		<span>16</span>
		<span>17</span>
		<span>18</span>
		<span>19</span>
		<span>20</span>
		<span>21</span>
		<span>22</span>
		<span>23</span>
		<span>24</span>
		<span>25</span>
		<span>26</span>
		<span>27</span>
		<span>28</span>
		<span>29</span>
		<span>30</span>
		<span>31</span>
		<span>32</span>
		<span>33</span>
		<span>34</span>
		<span>35</span>
		<span>36</span>
		<span>37</span>
		<span>38</span>
		<span>39</span>
		<span>40</span>
	</div>

	<div class="title" id="wrap">wrap Flex项目从左到右和从上到下在flex容器中多行显示。</div>
	<div class="body">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span>10</span>
		<span>11</span>
		<span>12</span>
		<span>13</span>
		<span>14</span>
		<span>15</span>
		<span>16</span>
		<span>17</span>
		<span>18</span>
		<span>19</span>
		<span>20</span>
		<span>21</span>
		<span>22</span>
		<span>23</span>
		<span>24</span>
		<span>25</span>
		<span>26</span>
		<span>27</span>
		<span>28</span>
		<span>29</span>
		<span>30</span>
		<span>31</span>
		<span>32</span>
		<span>33</span>
		<span>34</span>
		<span>35</span>
		<span>36</span>
		<span>37</span>
		<span>38</span>
		<span>39</span>
		<span>40</span>
	</div>

	<div class="title" id="flex-flow">flex-flow</div>
	<div class="body"><pre>-webkit-flex-flow: flex-direction || flex-wrap; /* Safari */
  flex-flow:         flex-direction || flex-wrap;</pre></div>


  <div class="title" id="flex-start">justify-content 属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式。 flex-start 在ltr上下文方式下，flex项目向flex容器的左边靠齐,默认属性</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>

  <div class="title" id="flex-end">flex-end 在ltr上下文方式下，flex项目向flex容器的右边靠齐。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>

  <div class="title" id="center"> center Flex项目在flex容器中居中对齐。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="space-between"> space-between Flex项目之间间距相对，第一个和最后一个flex项目向flex容器的边缘对齐。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="space-around"> space-around Flex项目前后相等的空间显示在flex容器中。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="stretch">align-items Flex项目在容器侧轴对齐方式，类似于justify-content，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素。<br>stretch Flex项目沿着flex容器侧轴方向填满整个flex容器高度（或宽度）需要自元素没有设置宽或高</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="align-items-flex-start">flex-start Flex项目排列在flex容器侧轴开始处。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="align-items-flex-end">flex-end Flex项目排列在flex容器侧轴结束处。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>



  <div class="title" id="align-items-center">center Flex项目排列在flex容器侧轴中间处。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  </div>


  <div class="title" id="baseline">baseline Flex项目按文本基线在flex容器侧轴中排列。</div>
  <div class="body">
  	<span style="height:30px">1</span>
  	<span style="height:50px">2</span>
  	<span style="height:80px">3</span>
  	<span style="height:70px">4</span>
  	<span style="height:55px">5</span>
  </div>


  <div class="title" id="align-content-stretch">stretch Flex项目行在flex容器侧轴按分布式空间排列，</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>
  <div class="title" id="align-content-flex-start">flex-start Flex项目在flex容器侧轴开始处排列。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>
  <div class="title" id="align-content-flex-end">flex-end Flex项目在flex容器侧轴末尾处排列</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>
  <div class="title" id="align-content-center">center Flex项目行沿flex容器侧轴中间排列。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>

  <div class="title" id="align-content-space-between">space-between Flex项目行与行之间间距相等，并且flex项目行第一行排在flex容器侧轴开始之处，flex项目行最后一行排在flex容器侧轴末尾之处。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>
  <div class="title" id="align-content-space-around">space-around Flex项目行上下间距相等，并且flex容器第一行距flex容器侧轴开始处间距是flex项目行与行之间间距一半。同时项目行最后一行距flex容器侧轴末尾处间距是flex项目行与行之间间距一半。</div>
  <div class="body">
  	<span>1</span>
  	<span>2</span>
  	<span>3</span>
  	<span>4</span>
  	<span>5</span>
  	<span>6</span>
  	<span>7</span>
  	<span>8</span>
  	<span>9</span>
  	<span>10</span>
  	<span>11</span>
  	<span>12</span>
  	<span>13</span>
  	<span>14</span>
  	<span>15</span>
  	<span>16</span>
  	<span>17</span>
  	<span>18</span>
  	<span>19</span>
  	<span>20</span>
  	<span>21</span>
  	<span>22</span>
  	<span>23</span>
  	<span>24</span>
  	<span>25</span>
  	<span>26</span>
  	<span>27</span>
  	<span>28</span>
  	<span>29</span>
  	<span>30</span>
  	<span>31</span>
  	<span>32</span>
  	<span>33</span>
  	<span>34</span>
  	<span>35</span>
  	<span>36</span>
  	<span>37</span>
  	<span>38</span>
  	<span>39</span>
  	<span>40</span>
  </div>











	<h1>flex项目属性</h1>

	<div class="title" id="order">order属性是用来控制flex容器中flex项目的排列顺序。默认情况flex项目在flex容器的顺序是flex项目出现的顺序。</div>
	<div class="body">
		<span style="width:100px;order:2;">1 <p>order:2</p></span>
		<span style="width:100px;">2</span>
		<span style="width: 100px;order:-1;">3 <p>order:-1</p></span>
		<span style="width:100px;">4</span>
		<span style="width:100px;">5</span>
	</div>
	<div class="title" id="flex-grow">flex-grow flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大。</div>
	<div class="body">
		<span style="flex-grow:2;">2</span>
		<span style="flex-grow:1;">1</span>
		<span style="flex-grow:1;">1</span>
		<span style="flex-grow:1;">1</span>
		<span style="flex-grow:1;">1</span>
	</div>
	<div class="title" id="flex-shrink">flex-shrink这个属性用来指定 flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大。</div>
	<div class="body">
		<span style="flex-shrink:3;">2</span>
		<span style="flex-shrink:2;">1</span>
		<span style="flex-shrink:5;">1</span>
		<span style="flex-shrink:1;">1</span>
		<span style="flex-shrink:1;">1</span>
	</div>
	<div class="title" id="flex-basis">flex-basis</div>
	<div class="body">指定元素在主轴上的尺寸 默认值auto， 在简写形式中没有写它默认值是0</div>
	<div class="title" id="flex">flex</div>
	<div class="body">默认值：0 1 auto</div>
	<div class="title" id="align-self">align-self</div>
	<div class="body"><pre>
		-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
		 align-self:         auto | flex-start | flex-end | center | baseline | stretch;
	</pre></div>
	<div class="title" id="">111</div>
	<div class="body"></div>
	<div class="title" id="">111</div>
	<div class="body"></div>
	<div class="title" id="">111</div>
	<div class="body"></div>

	<div class="title" id="1">111</div>
	<div class="body"></div>


	<script type="text/javascript">
	var drop = document.getElementById('drop');
	var menu = document.getElementById('menu');
	menu.onclick = function(){
		if(drop.style.display == '' || drop.style.display == 'block'){
			drop.style.display = 'none';
		}else{
			drop.style.display = 'block';
		}
	};
	</script>
</body>
</html>